﻿<article class="full-block clearfix">
		
			<header>
				<h2>基本配置信息</h2>
				<nav>
					<ul class="tab-switch">
						<li><a class="default-tab" href="#tab1" rel="tooltip" title="Switch to next tab">Basic Typo</a></li>
						<li><a href="#tab2">Table and form</a></li>
                        <li><a href="#tab3">test</a></li>
					</ul>
				</nav>
			</header>

			<section>
				<div class="tab default-tab" id="tab1">
					<h3></h3>
					
					<div class="image-frame right">
						<ul class="image-actions">
							<li class="view"><a href="#">View</a></li>
							<li class="delete"><a href="#">Delete</a></li>
						</ul>
					</div>
					
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et dignissim metus. Maecenas id augue ac metus tempus aliquam. Sed pharetra placerat est suscipit sagittis. Phasellus aliquam malesuada blandit. Donec adipiscing sem erat. Nunc at dui id purus lacinia tincidunt sit amet vel erat. Quisque congue urna ut <a class="button-link" href="#">nunc tempor</a> sodales. Sed neque leo, elementum id malesuada id, consequat et erat. Maecenas lorem mauris, consequat ornare elementum adipiscing, tristique eu eros. Nulla sodales, tellus id porta condimentum, purus tortor faucibus orci, et interdum dui purus quis massa.</p>
					<ul>
						<li>Lorem ipsum dolor sit amet</li>
						<li>Suspendisse et dignissim metus</li>
						<li>Maecenas id augue ac metus tempus</li>
						<li>Sed pharetra placerat est suscipit</li>
						<li>Phasellus aliquam males</li>
						<li>Nunc at dui id purus lacinia tincidunt</li>
					</ul>
				</div>
				
				<!-- Tab Content #tab2 with class. sidetabs for side tabs container -->
				<div class="tab sidetabs" id="tab2">
					<!-- Side Tab Navigation -->
					<nav class="sidetab-switch">
						<ul>
							<li><a class="default-sidetab" href="#sidetab1">Table</a></li>
							<li><a href="#sidetab2">Form</a></li>
						</ul>
						<p>Aenean facilisis ligula eget orci adipiscing varius. Curabitur sem ligula, egestas vel bibendum sed, sodales eu nulla. Vestibulum luctus aliquam feugiat. Donec porta interdum placerat.</p>
					</nav>
					<!-- /Side Tab Navigation -->
					
					<!-- Side Tab Content #sidetab1 -->
					<div class="sidetab default-sidetab" id="sidetab1">
						<h3>Table with jQuery.dataTables</h3>
						<table class="datatable">
							<thead>
								<tr>
									<th>Rendering engine</th>
									<th>Browser</th>
									<th>Platform(s)</th>
									<th>Engine version</th>
									<th>CSS grade</th>
								</tr>
							</thead>
							<tbody>
								<tr class="gradeX">
									<td>Trident</td>
									<td>Internet Explorer 4.0</td>
									<td>Win 95+</td>
									<td class="center"> 4</td>
									<td class="center">X</td>
								</tr>
								<tr class="gradeC">
									<td>Trident</td>
									<td>Internet  Explorer 5.0</td>
									<td>Win 95+</td>
									<td class="center">5</td>
									<td class="center">C</td>
								</tr>
								<tr class="gradeA">
									<td>Trident</td>
									<td>Internet Explorer 5.5</td>
									<td>Win 95+</td>
									<td class="center">5.5</td>
									<td class="center">A</td>
								</tr>
								<tr class="gradeA">
									<td>Trident</td>
									<td>Internet Explorer 6</td>
									<td>Win 98+</td>
									<td class="center">6</td>
									<td class="center">A</td>
								</tr>
								<tr class="gradeA">
									<td>Trident</td>
									<td>Internet Explorer 7</td>
									<td>Win XP SP2+</td>
									<td class="center">7</td>
									<td class="center">A</td>
								</tr>
								</tbody>
							</table>
						</form>
					</div>
					<!-- /Side Tab Content #sidetab1 -->
					
					<!-- Side Tab Content #sidetab2 -->
					<div class="sidetab" id="sidetab2">
						<h3>Form</h3>
						<form>
							<!-- Inputs -->
							<!-- Use class .small, .medium or .large for predefined size -->
							<fieldset>
								<legend>Legend</legend>
								<dl>
									<dt>
										<label>Short Input</label>
									</dt>
									<dd>
										<input type="text" class="small">
										<p>Short description of event</p>
									</dd>
									<dt>
										<label>Medium Input</label>
									</dt>
									<dd>
										<input type="text" class="medium">
									</dd>
									<dt>
										<label>Focused Input</label>
									</dt>
									<dd>
										<input type="text" class="medium">
									</dd>
									<dt>
										<label>Valid Input</label>
									</dt>
									<dd>
										<input type="text" class="medium valid">
										<span class="valid-side-note">Valid text</span>
									</dd>
									<dt>
										<label>Invalid Input</label>
									</dt>
									<dd>
										<input type="text" class="medium invalid">
										<span class="invalid-side-note">Invalid text</span>
									</dd>
									<dt>
										<label>Long text input</label>
									</dt>
									<dd>
										<input type="text" class="large">
										<p>Short description of event</p>
									</dd>
									<dt>
										<label>Textarea</label>
									</dt>
									<dd>
										<!-- Use class .wysiwyg for jQuery jWYSIWYG initiation -->
										<textarea rows="5" cols="40" class="wysiwyg large"></textarea>
										<p>Short description of event</p>
									</dd>
								</dl>
							</fieldset>
							<fieldset>
								<legend>Check-in some of these</legend>
								<dl>
									<dt class="checkbox"><label>Checkbox A</label></dt>
									<dd><input type="checkbox"></dd>
									<dt class="checkbox"><label>Checkbox B</label></dt>
									<dd><input type="checkbox"></dd>
									<dt class="checkbox"><label>Checkbox C</label></dt>
									<dd><input type="checkbox"></dd>
								</dl>
							</fieldset>
							<fieldset>
								<legend>Choose one of these</legend>
								<dl>
									<dt class="radio"><label>Option 1</label></dt>
									<dd><input type="radio" name="test"></dd>
									<dt class="radio"><label>Option 2</label></dt>
									<dd><input type="radio" name="test"></dd>
									<dt class="radio"><label>Option 3</label></dt>
									<dd><input type="radio" name="test"></dd>
								</dl>
							</fieldset>
							<fieldset>
								<legend>Choose one of these</legend>
								<dl>
									<dt>&nbsp;</dt>
									<dd>
										<select name="actions">
											<option selected>Choose an action</option>
											<option value="e">Edit</option>
											<option value="r">Remove</option>
											<option value="x">Export</option>
										</select>
									</dd>
								</dl>
							</fieldset>
							<button type="submit">Submit</button> or <a href="#">Cancel</a>
						</form>
					</div>
					<!-- /Side Tab Content #sidetab2 -->
					
				</div>
				<!-- /Tab Content #tab2 -->
                <div class="tab sidetabs" id="tab3">
                    这是tab3的内容
                </div>
			</section>
			<!-- /Article Content -->
			
			<!-- Article Footer -->
			<footer>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et <a href="#sample" rel="modal">open modal!</a> Maecenas id augue ac metus tempus aliquam. Sed pharetra placerat suscipit sagittis.</p>
			</footer>
			<!-- /Article Footer -->
			
		</article>